<template >
	<div id="form">
		<div class="t">
	         <div class="t_1">
	         	 <div>用户注册</div>
	         </div>
         
             <div class="t_2">
				<div class="inputWrap" :class="{active:inputActive==3}">
	              <input type="text" class="input" placeholder="请输入您的手机号" 
	              	@focus="inputActive=3" v-model="registerInfo.mobile"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="clearMobile"/>
				</div>	
				<div class="inputWrap" :class="{active:inputActive==4}">
	              <input type="text" class="input" placeholder="请输入您的密码" @focus="inputActive=4" 
	              	v-model="registerInfo.passwd"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="clearPasswd"/>
				</div>	
				<div class="inputWrap" :class="{active:inputActive==5}">
	              <input type="text" class="input" placeholder="请再次输入您的密码" @focus="inputActive=5"
	              	v-model="registerInfo.passwdAgain"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="clearPasswdAgain"/>
				</div>	
				<div class="inputWrap2" :class="{active:inputActive==6}">
	              <input type="text" v-model="registerInfo.sign" class="input2" placeholder="请输入验证码" @focus="inputActive=6"/>
	              <span class="yzm" @click="getYzm" v-show="canSend">{{yzmTitle}}</span>
	              <span style="color: #10B992;" v-show="!canSend">{{timer1}}<span>s</span></span>	             
				</div>	
				<div class="yqm" v-if="userInfo.invitationCode">
					<span>邀请码:</span>
					<span style="margin-left: 8px;">{{userInfo.invitationCode}}</span>
				</div>
						
				<div class="xy" @click="agree">
					<span class="radio" :class="{active:agreeRadio==1}">
						<div class="point" :class="{active:agreeRadio==1}"></div>
					</span>
					<span>我同意并阅读</span>
					<span style="color: #10B992;">《圈经济用户注册协议》</span>
				</div>
						
				<van-button  size="large" color="#10B992" :loading="registerLoading"  class="registerBtn" @click="register">注册</van-button>
            </div>       
		</div>	
	</div>

</template>

<script>

import { requestData } from '@/api/public'

export default {
  components: {
 
  },
  data () {
    return {
       url6:'/registerApi/updatecgr/v1',   // 注册接口
       url7:'/login/sms/sendValidateCode', // 获取手机验证码    	
       registerLoading:false,     // 注册是否在加载中    	
       agreeRadio:1,              // 用于绑定是否同意注册协议	
       inputActive:0,
	   registerInfo:{             // 注册字段
		  "sign" : "",             // 手机验证码
		  "mobile" : "18361388764",           // 手机号码
		  "cmd" : "Register",      // 接口名称，写死的
		  "passwd" : "123456",           // 密码
		  "passwdAgain":'123456'         // 再次输入密码
	   }, 
	   canSend:true,              // 是否能够发送验证码
	   yzmTitle:'点击获取验证码',       // 验证码标题
       mobileCode:'',             // 储存发送的手机验证码
       timer1:60,                 // 记录可再次发送验证码的时间 	   
	   userInfo:{                 // 用户信息   
	  	  userId:'',               // 用户ID
	  	  invitationCode:''        // 邀请码
	   },       
    }
  },
  computed: {

  },
  mounted () {
  	 this.userInfo.invitationCode=this.$router.currentRoute.query.invitationCode
  },
  methods: {
  	// 清除注册时输入的手机号
  	clearMobile(){
  		this.registerInfo.mobile=''
  	},
  	// 清除注册时输入的密码
  	clearPasswdAgain(){
  		this.registerInfo.passwdAgain=''
  	},
  	// 清除注册时输入的确认密码
  	clearPasswd(){
  		this.registerInfo.passwd=''
  	},
  	// 注册
  	register(){
  		// 验证手机号码格式
  		let reg=/^1[3456789]\d{9}$/
  		if(!reg.test(this.registerInfo.mobile)){
  			this.$toast('请输入正确的手机号');
  			return false
  		}
  		// 验证密码
  		if(!this.registerInfo.passwd){
  			this.$toast('请输入正确的用户密码');
  			return false
  		}  			  		
  		// 验证2次密码是否一致
  		if(this.registerInfo.passwd!=this.registerInfo.passwdAgain){
  			this.$toast('两次密码输入不一致');
  			return false  			
  		}
  		// 验证协议是否同意
  		if(this.agreeRadio!=1){
  			this.$toast('请同意圈经济用户协议');
  			return false  	  			
  		}
  		if(!this.registerInfo.sign){
  			this.$toast('请输入验证码');
  			return false  	    			
  		}
  		// 暂时验证码写死 000000，后期动态
  		this.registerInfo.sign='111111'
        this.registerLoading=true
        let str="?sign="+this.registerInfo.sign+"&mobile="+this.registerInfo.mobile+"&cmd=Register&passwd="+this.registerInfo.passwd 
        let url=this.url6+str
		requestData(url,'GET').then(res=>{ 
	         this.registerLoading=false
	         // 注册成功
	         if(res.responseCode==100){
	         	 this.userInfo.userId=res.data.nUid
	         	 // 判断是否有邀请码 如果有邀请码就要绑定上级
	         	 if(this.userInfo.invitationCode){
	         	 	 let str=this.url6+'?cmd=InviteCode&memberId='+this.userInfo.userId+'&inviteCode='+this.userInfo.invitationCode
	         	 	 requestData(str,'GET').then(result=>{ 
	         	 	 	 if(result.responseCode!=100){
	         	 	 	 	alert('注册成功,但绑定邀请码失败,'+result.messageList[0].message)         	 	 	 
	         	 	 	 }  
	         	 	 	 window.location.href="https://api.quanclubs.com/h5/index.html#/download"
	         	 	 })
	         	 }else{
                    window.location.href="https://api.quanclubs.com/h5/index.html#/download"  	 	 
	         	 }
	         }else{
	         	 alert(res.messageList[0].message)
	         }
		})	
  	},
  	
  	// 点击注册协议
  	agree(){
  		if(this.agreeRadio==0){
  			this.agreeRadio=1
  		}else{
  			this.agreeRadio=0
  		}
  	},
  	// 点击获取验证码
  	getYzm(){
  		// 验证手机号码格式
  		let reg=/^1[3456789]\d{9}$/
  		if(!reg.test(this.registerInfo.mobile)){
  			this.$toast('请输入正确的手机号');
  			return false
  		}
  		let params={
  			"mobile": this.registerInfo.mobile
  		}
  		this.canSend=false
		requestData(this.url7,'POST',params).then(res=>{ 
			if(res.responseCode==100){
				this.$toast('验证码发送成功,有效时间1分钟');
				this.mobileCode=res.data.code
				this.timing()
			}else{
  			this.$toast('验证码发送失败');
  			return false					
			}
		})	    		
  	},  	
  	// 再次发送验证码倒计时
  	timing(){
  		let that=this
  		let timer=setInterval(function(){
  			if(that.timer1==0){
  				clearInterval(timer)
  				that.timer1=60
  				that.canSend=true
  			}else{
  				that.timer1--
  			}
  		},1000)
  	},  	
  }
}
</script>
<style lang="scss" scoped>
*{box-sizing: border-box;}
.t{padding: 10px 15px;
   .header{display:flex;justify-content: space-between;
   	img{width: 20px;height: 20px;display: block;}
   } 
    .t_1{margin-top: 13px;font-size: 20px;font-weight: bold;}  
    .t_2{margin-top: 8px;}
    .yqm{padding: 15px 6px;color: #10B992;border-bottom: 1px solid #e9e9e9;}
    .xy{text-align: center;font-size: 14px;margin-top: 20px;
       .radio{width: 14px;height: 14px;border-radius: 50%;display: inline-block;border:1px solid #ccc;
       vertical-align: -2px;margin-right: 5px;position: relative;
         .point{width: 8px;height: 8px;background: #ccc;position: absolute;top: 0px;left: 0px;bottom: 0;right:0;margin: auto;}
         .point.active{background: #10B992;}
       }
       .radio.active{border:1px solid #10B992;}
    }
    .inputWrap2{display: flex;border-bottom: 1px solid #e9e9e9;padding: 15px 6px;position: relative;align-items: center;justify-content: space-between;
       .input2{width: 50%;border:none;color: #333;font-size: 16px;}
       .yzm{color: #10B992;}
    }    
	  .inputWrap{border-bottom: 1px solid #e9e9e9;padding: 15px 6px;position: relative;
	      .clear{position: absolute;top: 19px;right: 8px;width: 16px;height: 16px;}	      
	  }
	  .t_3{display: flex;justify-content: space-between;padding: 15px 6px 15px;border-bottom: 1px solid #e9e9e9;align-items: center;}
	  .font2{color: #10B992;font-size: 13px;}
	  .inputWrap.active{border-bottom: 1px solid #10B992;}   
	  .inputWrap2.active{border-bottom: 1px solid #10B992;} 
	  .input{width: 90%;border:none;color: #333;font-size: 16px;}
	  .search{border-radius: 66px;padding: 6px 20px;background: #10B992;color: #fff;position: absolute;right: 8px;top: 8px}
	  .point{width:11px;height: 11px;border-radius: 50%;background: #CCC;display: inline-block;}
	  .point.active{background: #10B992;}
		input::-webkit-input-placeholder{
		    color:#CCCCCC;
		}
		input::-moz-placeholder{
		    color:#CCCCCC;
		}
		input:-moz-placeholder{
		    color:#CCCCCC;
		}
		input:-ms-input-placeholder{
		    color:#CCCCCC;
		}	  
		.tips{font-size: 12px;color: #999;padding: 10px 0 20px;}
		.buyBtn{border-radius: 43px;}
		.registerBtn{border-radius: 43px;margin-top: 20px;}
}



</style>
